<template>
  <div
    id="jodit_editor"
    @contextmenu.prevent="handleRightClick($event)"
  >
    <canvas id="selectionCanvas"></canvas>
    <jodit-editor
      v-model="content"
      ref="editorContainerRef"
      :plugins="plugins"
      :config="config"
    />
    <!-- 自定义菜单 -->
    <div
      v-if="showMenu"
      class="context_menu"
      :style="menuStyle"
    >
      <ul>
        <li @click="operateMenu('annotations')">批注</li>
        <li @click="operateMenu('comment')">评论</li>
      </ul>
    </div>

    <el-dialog
      v-model="commentDialog"
      :title="commentType === 'annotations_class' ? '批注':'评论'"
      width="400px"
      align-center
      modal-class="comment_dialog"
      @close="commentDialog = false"
    >
      <div class="comment_box">
        {{commentValue}}
      </div>
    </el-dialog>
  </div>

</template>

<script setup>
import { reactive, onMounted, onBeforeUnmount, ref, toRaw, watch, nextTick, onDeactivated, onActivated } from 'vue'
import 'jodit/build/jodit.min.css'
import { JoditEditor, Jodit } from 'jodit-vue'
import { deepClone, getNanoid } from '@/utils/index'
import { ElMessage, ElMessageBox } from "element-plus";
import { isCaretAtStartFun, findNodeById } from "./index.js";
import { upDocumentSection } from '@/api/document';
import image1 from '@/assets/images/132.jpg'
import mulu_2 from '@/assets/images/mulu_2.png'

const emit = defineEmits(['catalogShow']);
const props = defineProps({
  border: {
    type: Boolean,
    default: true,
  },
  treeDataMap: {
    type: Object,
    default: () => { }
  },
  stripe: {
    type: Boolean,
    default: false,
  },
  isToolbar: {
    type: Boolean,
    default: true,
  },
  isReadonly: {
    type: Boolean,
    default: false,
  },
  htmlStructure: {
    type: String,
    default: ''
  }
})
const editorContainerRef = ref(null);
const content = ref('')
const commentValue = ref('')
const commentType = ref('')
const showMenu = ref(false);
const disableInput = ref(false);
const commentDialog = ref(false);
const menuStyle = ref({ left: '0px', top: '0px' })
const filesMap = new Map();  // 用于存储粘贴的文件
const selectionBoxes = ref([]);
// Jodit 配置
console.log(props.isToolbar, 'fpwajfa');

const config = {
  language: 'zh_cn',
  textIcons: false,
  toolbar: props.isToolbar,
  readonly: props.isReadonly, //做权限  配合id 设置contenteditable="false" cursor: not-allowed;  是否只读
  disablePlugins: 'delete', // 禁用delete
  toolbarSticky: true,
  toolbarDisableStickyForMobile: false,
  toolbarAdaptive: true,
  // cleanHTML: {
  //   // allowAttributes: {
  //   //   span: ['class', 'style'] // 指定允许 span 标签保留 class 和 style 属性
  //   // },

  //   allowTags: {
  //     span: true,
  //   },
  //   span: {
  //     class: true,
  //     style: true
  //   },
  // },
  // editor.setReadOnly(true)
  // setTimeout(() => {
  //   editor.setReadOnly(false)
  // }, 3000)
  i18n: {
    //将语言版本设置为中文后仍然还有部分显示的英文改为中文，左面的key为页面上显示的英文，value则是需要对应显示的中文，目前支持19种语言
    zh_cn: {//简体中文
      top: "上",
      right: "右",
      bottom: "下",
      left: "左",
      Title: "标题",
      Link: "链接",
      "Line height": "行高",
      Alternative: "描述",
      "Alternative text": "描述",
      "Lower Alpha": "小写英文字母",
      "Upper Alpha": "大写英文字母",
      "Lower Roman": "小写罗马数字",
      "Upper Roman": "大写罗马数字",
      "Lower Greek": "小写希腊字母",
    },
    zh_tw: {//中文繁体
      Link: '链接'
    }
  },
  // image: {
  //   //图片相关配置
  //   editSrc: false,
  //   editStyle: false,
  //   useImageEditor: true,
  // },
  // allowAttributes: ['class', 'id', 'style'], // 允许保留的 HTML 属性
  controls: {
    // 自定义工具栏按钮（添加一个自定义按钮）
    insertImage: {
      // iconURL: image1,
      // iconURL: mulu_3,
      icon: 'image',
      // icon: '<i class="fa fa-star"></i>', // 按钮图标
      tooltip: '插入图片',
      name: 'insertImage',
      exec: (editor) => {
        // 在图片上传按钮点击时调用
        console.log('Insert image button clicked');

        // 自定义图片上传逻辑或弹出文件选择框
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*';
        input.onchange = (e) => {
          const file = e.target.files[0];
          if (file) {
            // 处理图片上传，例如上传至服务器
            console.log('Imagefileselected:', file);
            let nanoid = 'img_' + getNanoid();
            filesMap.set(nanoid, file); // 存储到map中
            // 模拟图片插入
            const reader = new FileReader();
            reader.onload = function (event) {
              const imgElement = `<img id="${nanoid}" src="${event.target.result}" alt="图片" />`;
              editor.selection.insertHTML(imgElement);
            };
            reader.readAsDataURL(file);
          }
        };
        input.click(); // 模拟点击文件选择框
        // 获取当前选区对象
        // const sel = editor.s;
        // console.log(sel, 'selselsel');

        // // 1. 检查是否有选中内容
        // if (sel.isCollapsed()) {
        //   console.log('未选中文本');

        //   return;
        // }

        // // 2. 获取选中文本的 HTML 内容
        // const selectedHTML = sel.html;

        // // 3. 包裹新标签
        // const wrappedHTML = `<div class="highlight" style="background:yellow; display: inline-block;">${selectedHTML}</div>`;

        // // 4. 替换选中内容
        // sel.insertHTML(wrappedHTML);
      }
    },
    // 大纲展开收起
    catalogShow: {
      // iconURL: image1,
      iconURL: mulu_2,
      // icon: 'image',
      // icon: '<i class="fa fa-star"></i>', // 按钮图标
      tooltip: '大纲',
      name: 'catalogShow',
      exec: (editor) => {
        console.log('大纲展开收起');
        emit("catalogShow");
      }
    },
    font: {
      list: Jodit.atom({
        //左侧key为电脑上对应字体的名称，右侧value是在编辑器字体下拉列表中展示的名称
        "Microsoft YaHei": "微软雅黑",
        KaiTi: "楷体",
        SimHei: "黑体",
        SimSun: "宋体",
        FangSong: "仿宋",
        LiSu: "隶书",
        华文行楷: "华文行楷",
        等线: "等线",
      }),
    },
  },
  buttons: [
    'catalogShow', '|', 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript',
    '|', 'indent', 'outdent', 'align', 'ul', 'ol', '|',
    'font', 'fontsize', 'brush', 'paragraph',
    'table', 'link',
    //  'justifyLeft', 'justifyCenter', 'justifyRight', 'alignJustify', 'image',对齐
    'insertImage', 'undo', 'redo',
  ], // 工具栏按钮列表
  events: {
    // 内容变更回调
    change: (newContent) => {
      console.log('内容变更:', { newContent });
    },
    paste: (event) => {
      console.log('粘贴事件触发:', event);
      // 获取粘贴的内容
      const clipboardData = event.clipboardData;
      // const pastedContent = clipboardData.getData('text');
      // console.log('粘贴内容:', pastedContent, clipboardData, clipboardData.items, clipboardData.items.length);

      if (clipboardData) {
        // 获取剪贴板中的所有项
        const items = clipboardData.items;
        for (let i = 0; i < items.length; i++) {
          const item = items[i];

          // console.log('粘贴图片内容:', item, clipboardData.items.length);
          // 检查是否为图片
          if (item.type.indexOf('image') !== -1) {
            event.preventDefault();
            const blob = item.getAsFile();
            const reader = new FileReader();

            // 读取图片并插入到编辑器中
            let nanoid = 'img_' + getNanoid();
            filesMap.set(nanoid, blob); // 存储到map中
            reader.onload = (e) => {
              console.log({ file: e.target.result }, '粘贴图片与file', blob);
              const editor = editorContainerRef.value.editor;
              const imgElement = `<img src="${e.target.result}" id="${nanoid}" alt="图片" />`;
              editor.selection.insertHTML(imgElement); // 插入图片到编辑器中
            };
            reader.readAsDataURL(blob);
          }
        }
      }
    },
    afterInit: () => {
      console.log('afterInit 初始化后');
    },
    beforeCommand: function (command) {
      console.log(command, '监听删除与退格');
      if (command === 'deletebutton') {
        return false;
      }
      if (command === 'backspacebutton') {
        const selection = window.getSelection();
        if (!selection || selection.rangeCount <= 0) return false;
        const range = selection.getRangeAt(0);
        if (selection && selection.rangeCount > 0) {
          let container = selection.getRangeAt(0).commonAncestorContainer;
          // 如果是文本节点，则获取父节点
          if (container.nodeType === Node.TEXT_NODE) {
            container = container.parentNode;
          }
          // true禁用退格  false不处理 判断光标是否在文档开始位置
          const isCaretAtStart = isCaretAtStartFun();
          console.log(isCaretAtStart, 'isCaretAtStartisCaretAtStart');

          // 判断光标所在区域是否在具有 title_disable 类的元素内部
          if ((container && container.closest('.title_disable')) || isCaretAtStart) {
            console.log('退格键被禁止，因为光标在 title_disable 区域内', container, isCaretAtStart);
            ElMessage.warning("禁止删除标题!");
            return false;
          }
          // 克隆选区内容为文档片段
          const fragment = range.cloneContents();
          // 检查克隆的片段中是否存在带有 .title_disable 类的元素
          const startNode = range.startContainer;
          const endNode = range.endContainer;
          const startParent = startNode.nodeType === Node.TEXT_NODE ? startNode.parentElement : startNode;
          const endParent = endNode.nodeType === Node.TEXT_NODE ? endNode.parentElement : endNode;
          if (fragment.querySelector('.title_disable') || (startParent && startParent.closest('.title_disable')) || (endParent && endParent.closest('.title_disable'))) {
            console.log('选区中包含 .title_disable 元素，禁止删除');
            ElMessage.warning("标题内容禁止删除!");
            return false;
          }
        }
        return true;
      }
    }
  },
};
const plugins = [
  {
    name: 'example',
    callback: function (editor) {
      console.log(editor, '21313913183013');

      editor.events.on('afterInit', function (e) {
        console.log('afterInit 初始化后', e, editor)
      })
      editor.events.on('keydown', e => {
        // console.log(e.key, 'keydownkeydown');
        if (disableInput.value) {
          e.preventDefault();
        }
      });
      // editor.events.on('backSpaceBeforeCases', (e, t) => {
      //   console.log(e, 'backSpaceBeforeCases', t, editor);
      //   const selection = window.getSelection();
      //   const range = selection.getRangeAt(0);
      //   if (selection && selection.rangeCount > 0) {
      //     let container = selection.getRangeAt(0).commonAncestorContainer;
      //     // 如果是文本节点，则获取父节点
      //     if (container.nodeType === Node.TEXT_NODE) {
      //       container = container.parentNode;
      //     }
      //     // 判断光标所在区域是否在具有 title_disable 类的元素内部
      //     if (container && container.closest('.title_disable')) {
      //       console.log('退格键被禁止，因为光标在 title_disable 区域内');
      //       ElMessage.warning("禁止删除标题!");
      //       return true;
      //     }
      //   }
      //   return false;
      // });
    }
  },
]

const handleRightClick = (event) => {
  event.preventDefault(); // 阻止默认右键菜单
  console.log(event, 'handleRightClickhandleRightClick');

  const selection = window.getSelection();
  if (selection.rangeCount === 0) return '';
  if (selection.toString().trim()) {


    showMenu.value = true;
    menuStyle.value.left = `${event.clientX + 5}px`;
    menuStyle.value.top = `${event.clientY + 5}px`;

    nextTick(() => {
      const contextMenu = document.querySelector('.context_menu');
      if (contextMenu) {
        const contextMenuRect = contextMenu.getBoundingClientRect();
        const viewportHeight = window.innerHeight;
        // 判断context_menu是否在可视区域内
        console.log('判断context_menu是否在可视区域内', contextMenuRect.bottom, viewportHeight);
        if (contextMenuRect.bottom + contextMenuRect.height > viewportHeight) {
          menuStyle.value.transform = `translateY(-${contextMenuRect.height}px)`;
        } else {
          menuStyle.value.transform = `translateY(0)`;
        }
      }
    });
  }
}
//隐藏右键菜单
const hideMenu = (event) => {
  if (showMenu.value) {
    event.preventDefault();  //阻止默认事件 避免选区被清除
    setTimeout(() => {
      showMenu.value = false;
    }, 500);
  }
}
// 右键菜单 操作
const operateMenu = (type) => {

  showMenu.value = false;


  ElMessageBox.prompt(`请输入${type === "annotations" ? "批注" : "评论"}内容`, "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPattern: /\S/,
    inputErrorMessage: "内容不能为空",
  })
    .then(({ value }) => {
      let data = applyCustomBold(type);
      console.log("评论批注", value, data);
      nextTick(() => {

        // 使用 querySelectorAll 查找符合条件的所有元素
        const elements = document.querySelectorAll(`.${data.class}[classid="${data.classid}"]`);
        // 将 NodeList 转换为数组（可选）
        const elementsArray = Array.from(elements);
        // 输出结果
        console.log(elementsArray);

        // 假设 elementsArray 已经定义并包含所需的元素
        if (elementsArray.length > 0) {
          // 获取最后一个元素
          const lastElement = elementsArray[elementsArray.length - 1];

          // 创建新的 <i> 元素
          const newItalicElement = document.createElement('em');
          newItalicElement.id = data.classid;
          newItalicElement.setAttribute('contenteditable', 'false');
          newItalicElement.title = value;
          newItalicElement.classList.add('a_' + data.class);
          newItalicElement.textContent = ' .'; // 设置 <i> 标签的文本内容
          newItalicElement.addEventListener('click', function (event) {
            // 在此处添加点击事件的处理逻辑
            console.log('链接被点击了');
            onclickIcon(event, data, value);
          });
          // 获取最后一个元素的父节点
          const parent = lastElement.parentNode;

          // 检查 lastElement 是否有下一个兄弟节点
          if (lastElement.nextSibling) {
            // 在 lastElement 的下一个兄弟节点之前插入新的 <i> 元素
            parent.insertBefore(newItalicElement, lastElement.nextSibling);
          } else {
            // 如果没有下一个兄弟节点，则直接追加到父节点的末尾
            parent.appendChild(newItalicElement);
          }
        }
      });
    })
    .catch(() => {
      console.log("取消");
    });
}

function onclickIcon(event, data, value) {
  console.log('点击了图标', event, data, value);
  commentValue.value = value;
  commentType.value = data.class;
  commentDialog.value = true;
}

function applyCustomBold(type) {
  // 保证 editor 已初始化
  let uuid = generateUniqueId()
  nextTick(() => {
    const jodit = editorContainerRef.value.editor
    // jodit.s.commitStyle({ element: 'h1' }); // Wrap selected text in <h1> tag
    // jodit.s.commitStyle({ attributes: { style: { color: 'blue' } } }); // Apply style to selected text
    jodit.s.commitStyle({ attributes: { class: `${type}_class`, classid: `${type}${uuid}` } }); // Add class to selected text
    jodit.synchronizeValues();
  });
  return { classid: `${type}${uuid}`, class: `${type}_class` };
}
function generateUniqueId() {
  const timestamp = Date.now().toString(16); // 当前时间戳转16进制（8位）
  const randomPart = Math.floor(Math.random() * 10000000).toString().padStart(8, '0'); // 8位随机数
  return 'A' + randomPart + timestamp; // 总长16位
}


// 重新加载工具栏
const reloadToolbar = () => {
  // console.log('重新加载工具栏!', editorInstance.value, editorInstance.value.buildToolbar);
  if (editorContainerRef.value && editorContainerRef.value.editor && editorContainerRef.value.editor.buildToolbar) {
    editorContainerRef.value.editor.buildToolbar()
    console.log('重新加载工具栏成功!');

    const annotationsEls = document.querySelectorAll('.a_annotations_class');
    const commentEls = document.querySelectorAll('.a_comment_class');
    console.log(annotationsEls, commentEls, '备注与批注列表');
  }
};

// 拦截键盘事件 
function handleKeyDown(event) {
  const editor = editorContainerRef.value.editor;
  // 检测Tab键 实现缩进
  if (event.key === 'Tab') {
    event.preventDefault(); // 阻止默认的Tab行为
    const selection = editor.selection;
    const range = selection.range;
    if (range) {
      const currentNode = selection.current();
      if (currentNode) {
        // 在当前节点的文本内容前添加两个空格
        console.log(currentNode);
        currentNode.textContent = '\u00A0\u00A0\u00A0\u00A0' + currentNode.textContent;
      }
    }
  }
  // 检测 Ctrl+S 或 Command+S 键
  if (event.ctrlKey && event.key.toLowerCase() === 's') {
    event.preventDefault(); // 阻止浏览器默认保存行为
    // 获取当前编辑器内容（HTML 字符串）
    const content = editor.value;
    const parentEl = document.querySelector('.jodit-wysiwyg');
    const structuredData = Array.from(parentEl.children).map(child => {
      // 目前为大纲所有的节点，需要根据实际情况修改  如根据用户权限ids 过滤保存指定章节
      let treeDataMapItem = deepClone(props.treeDataMap.get(child.id));
      delete treeDataMapItem.levelCombine;
      delete treeDataMapItem.children;

      const firstChild = child.querySelector('div.child');
      return {
        ...treeDataMapItem,
        id: child.id || '',  // 优先用现有ID，没有则生成
        content: firstChild ? firstChild.innerHTML : ''       // 直接取HTML内容
      };
    });
    console.log('保存内容：', { content }, filesMap, parentEl.children, structuredData, props.treeDataMap);
    // structuredData
    upDocumentSection(structuredData).then(res => {
      console.log(res, '批量保存章节');
      if (res.code == 200) {
        ElMessage.success('保存成功');
      }
    })

    // 此处可以加入保存逻辑，例如发送到后台 API 或存入 store 等
  }

  const editorSelection = editor.selection;
  if (editorSelection.current()) {
    // 判断光标是否处于title_disable标签上
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    let container = range.commonAncestorContainer;
    console.log('选区包含禁用类名?', { 'editorSelection.current': editorSelection.current(), container });
    // 确保容器是元素节点（排除文本节点）
    if (container.nodeType === Node.ELEMENT_NODE) {
    } else {
      container = container.parentElement;
    }
    // 检查元素是否包含 title_disable 类名
    if (container.classList.contains('title_disable')) {
      console.log('选中标题');
      event.preventDefault();
      ElMessage.warning('禁止修改此处内容!');
      window.getSelection().removeAllRanges();
    } else {
      // console.log('未选中标题');
    }
  }

}

// 监听鼠标松开 禁止选中标题
function handleMouseup() {
  console.log('鼠标松开');

  const selection = window.getSelection();
  if (selection && selection.rangeCount > 0 && !selection.isCollapsed) {
    const range = selection.getRangeAt(0);
    // 克隆选区内容为文档片段
    const fragment = range.cloneContents();
    // 检查克隆的片段中是否存在带有 .title_disable 类的元素
    const startNode = range.startContainer;
    const endNode = range.endContainer;
    const startParent = startNode.nodeType === Node.TEXT_NODE ? startNode.parentElement : startNode;
    const endParent = endNode.nodeType === Node.TEXT_NODE ? endNode.parentElement : endNode;
    if (fragment.querySelector('.title_disable') || (startParent && startParent.closest('.title_disable')) || (endParent && endParent.closest('.title_disable'))) {
      selection.removeAllRanges();
      console.log('选区中包含 .title_disable 元素，已取消选中');
    }
  }


  if (selection && selection.rangeCount > 0) {
    let container = selection.getRangeAt(0).commonAncestorContainer;
    // 如果是文本节点，则获取父节点
    if (container.nodeType === Node.TEXT_NODE) {
      container = container.parentNode;
    }
    // 判断光标所在区域是否在具有 title_disable 类的元素内部
    if ((container && container.closest('.title_disable'))) {
      // const selection = window.getSelection();
      // selection.removeAllRanges();
      // 获取类名为 title_disable 的元素
      let node1 = document.querySelector('.jodit-toolbar-editor-collection_size_middle');
      let node2 = document.querySelector('.jodit-popup_strategy_leftbottom');
      let node3 = document.querySelector('.jodit-popup_strategy_lefttop');
      console.log('工具栏隐藏');
      node1.classList.add('_disable');
      node2 ? node2.style.display = 'none' : null;
      node3 ? node3.style.display = 'none' : null;
      disableInput.value = true;
      return;
    }
  }
  disableInput.value = false;
  let node1 = document.querySelector('.jodit-toolbar-editor-collection_size_middle');
  console.log(node1, '工具栏显示');
  node1.classList.remove('_disable');

  //  setTimeout(() => {
  // insertRangeNode(); // 插入鼠标选区前后标记
  // }, 2000)
}

console.log('-------------------------------------富文本编辑1-------------------------------------');
onMounted(() => {
  console.log('-------------------------------------富文本编辑onMounted-------------------------------------');
  content.value = props.htmlStructure;
  // 初始化编辑器
  document.addEventListener('keydown', handleKeyDown); // 拦截键盘事件  检测 Ctrl+S 检测Tab键 实现缩进
  document.addEventListener("mousedown", hideMenu); // 监听鼠标按下 隐藏右键菜单
  document.addEventListener('mouseup', handleMouseup); // 监听鼠标松开 禁止选中标题


  nextTick(() => {
    reloadToolbar()
    try {
      ['A2a433b55457c4de89c4757b6e1158630', 'A3295c8c94d9a40169cd236c597d11efb'].forEach(e => {
        let node = document.getElementById(e);
        node.classList.add('title_disable');
        ['onclick', 'click', 'onmousedown', 'onmouseup', 'focus'].forEach(type => {
          node.addEventListener(type, (e) => {
            e.preventDefault();
            e.stopPropagation();
            return false;
          }, true); // 使用捕获阶段阻止
        });
        // node.addEventListener('click', (e) => {
        //   e.preventDefault();
        //   e.stopPropagation();
        //   return false;
        // }, true); // 使用捕获阶段阻止
        // node.addEventListener('mousedown', (e) => {
        //   e.preventDefault();
        //   e.stopPropagation();
        //   return false;
        // }, true); // 使用捕获阶段阻止
        // node.addEventListener('mouseup', (e) => {
        //   e.preventDefault();
        //   e.stopPropagation();
        //   return false;
        // }, true); // 使用捕获阶段阻止
      });
    } catch (err) {
      console.error("出错：", err); // 打印具体错误
    }
  })

})

onBeforeUnmount(() => {
  console.log('组件卸载jodit');
  // 移除事件监听，避免内存泄漏
  document.removeEventListener('keydown', handleKeyDown);
  document.removeEventListener('mousedown', hideMenu);
  document.removeEventListener('mouseup', handleMouseup);

})
onActivated(() => {
  console.log('✅ 组件被激活');
  // 初始化编辑器
  document.addEventListener('keydown', handleKeyDown); // 拦截键盘事件  检测 Ctrl+S 检测Tab键 实现缩进
  document.addEventListener("mousedown", hideMenu); // 监听鼠标按下 隐藏右键菜单
  document.addEventListener('mouseup', handleMouseup); // 监听鼠标松开 禁止选中标题


  nextTick(() => {
    reloadToolbar()
  })
})
onDeactivated(() => {
  console.log('⏳ 组件被缓存');
  document.removeEventListener('keydown', handleKeyDown);
  document.removeEventListener('mousedown', hideMenu);
  document.removeEventListener('mouseup', handleMouseup);
});

</script>

<style lang="scss">
#jodit_editor {
  // .jodit-wysiwyg {
  // padding: 50px;
  // }
  // height: 84vh;
  position: relative;
  flex: 1;
  .jodit-container {
    // height: 84vh !important;
    .jodit-workplace {
      // height: calc(100% - 40px) !important;
      height: calc(100vh - 200px) !important;
    }
  }
  .child,
  .levelChildren {
    padding-left: 10px;
  }
  .title_disable {
    // user-select: none; /* 禁止选中 */
    caret-color: transparent; /* 隐藏光标 */
    // pointer-events: none;
    cursor: no-drop;
  }
  .menuInput {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .context_menu {
    position: fixed;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0 0;
    border-radius: 6px;
    min-width: 155px;
    color: #6c7078;
    overflow: hidden;
    font-size: 14px;
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    li {
      padding: 4px 23px;
      cursor: pointer;
      // border-bottom: 1px #f0f0f0 solid;
    }
    li:hover {
      background: #f0f0f0;
    }
    li:last-child {
      border: none; // 去掉最后一个li的底部边框
    }
  }
  ul,
  ol {
    padding-left: 40px;
  }
  ul {
    // 无序列表 默认实心圆
    list-style-type: disc;
  }
  ol {
    // 有序列表 默认数字
    list-style-type: decimal;
  }
  ul li::marker,
  ol li::marker {
    font-size: 120%;
    color: #006c63;
    font-family: "Comic Sans MS", cursive, sans-serif;
  }
  h1 {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

  h2 {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

  h3 {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

  h4 {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

  h5 {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

  h6 {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }
  .jodit-status-bar__item-right .jodit-status-bar-link {
    display: none;
  }
  .jodit-toolbar-editor-collection_size_middle._disable {
    position: relative;
    pointer-events: none;
  }
  .jodit-toolbar-editor-collection_size_middle._disable::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000025;
  }
  // .jodit-toolbar__box {
  //   display: none;
  // }

  // ul.lower-alpha {
  //   list-style-type: lower-alpha; // 小写英文字母
  // }

  // ul.lower-greek {
  //   list-style-type: lower-greek; // 小写希腊字母
  // }

  // ul.lower-roman {
  //   list-style-type: lower-roman; // 小写罗马数字
  // }

  // ul.upper-alpha {
  //   list-style-type: upper-alpha; // 大写英文字母
  // }

  // ul.upper-roman {
  //   list-style-type: upper-roman; // 大写罗马数字
  // }
}
#selectionCanvas {
  position: fixed;
  pointer-events: none;
  /* 确保 canvas 不影响页面交互 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}
.annotations_class.active {
  // 下划线
  text-decoration: underline;
  color: red;
}
.comment_class.active {
  // 下划线
  color: blue;
  text-decoration: underline;
}
.a_comment_class {
  content: " ";
  background-image: url(@/assets/images/icon_comment.png);
  display: inline-flex;
  width: 20px;
  height: 19px;
  background-size: 100% 100%;
  color: #fff;
  cursor: pointer;
}
.a_annotations_class {
  content: " ";
  background-image: url(@/assets/images/icon_annotations.png);
  display: inline-flex;
  width: 20px;
  height: 19px;
  background-size: 100% 100%;
  color: #fff;
  cursor: pointer;
}
</style>